<script setup lang="ts">

</script>

<template>
    <div class="map-operate map-operate-left top-ui">
        <div class="operate-list operate-right">
            <el-tooltip effect="dark" content="旋转" placement="right">
                <div>
                    <Iconfont name="icon-transform3d"></Iconfont>
                </div>
            </el-tooltip>
            <div class="operate-item-zoom">
                <p>
                    <el-tooltip effect="dark" content="放大" placement="right">
                        <Iconfont name="icon-zoomIn"></Iconfont>
                    </el-tooltip>
                </p>
                <p></p>
                <p>
                    <el-tooltip effect="dark" content="缩小" placement="right">
                        <Iconfont name="icon-zoomOut"></Iconfont>
                    </el-tooltip>
                </p>
            </div>
        </div>
    </div>
    <div class="map-operate map-operate-bottom top-ui">
        <div class="operate-list operate-bottom">
            <el-tooltip effect="dark" content="框架切换" placement="top">
                <div>
                    <Iconfont name="icon-to2d"></Iconfont>
                </div>
            </el-tooltip>
            <el-tooltip effect="dark" content="底图切换" placement="top">
                <div>
                    <Iconfont name="icon-mapPoi"></Iconfont>
                </div>
            </el-tooltip>
            <el-tooltip effect="dark" content="定位您的位置" placement="top">
                <div>
                    <Iconfont name="icon-locate"></Iconfont>
                </div>
            </el-tooltip>
            <el-tooltip effect="dark" content="全图" placement="top">
                <div>
                    <Iconfont name="icon-earth"></Iconfont>
                </div>
            </el-tooltip>
        </div>
    </div>
</template>

<style lang="scss" scoped>
// 地图操作
.map-operate {
    right: $app-right-margin;
    bottom: 30px;
}

// 底部列表样式
.map-operate-bottom {
    right: calc($app-right-margin + 56px);
}

// 列表样式
.operate-list {
    display: flex;

    & > div {
        width: 44px;
        height: 44px;
        line-height: 44px;
        border-radius: 4px;
        background-color: $app-bg-color;
        opacity: $app-bg-color-opacity;
        text-align: center;
        @include setTransition(500ms);
    }
}

// 右侧竖起列表样式
.operate-right {
    flex-direction: column;
    align-items: flex-end;

    & > div {
        margin-top: 12px;
    }

    & > div:first-child:hover {
        background: $app-bg-select-height-color;
        scale: 1.1;
    }

    .operate-item-zoom {
        height: 92px;
        border-radius: 4px;

        & > p {
            height: 50%;
            @include setTransition(500ms);
        }

        & > p:nth-child(2) {
            height: 0;
            border-top: 1px solid #3E4966;
            margin: 0 12px;
        }

        & > p:hover {
            border-radius: 4px;
            background: $app-bg-select-height-color;
            // scale: 1.1;
        }
    }
}

// 底部
.operate-bottom {
    & > div {
        margin-left: 12px;
    }

    & > div:hover {
        background: $app-bg-select-height-color;
        scale: 1.1;
    }
}
</style>
